<template>
  <jy-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
    <el-card class="box-card" shadow="never">
      <el-col :span="20" :offset="2">
        <div class="block">
          <el-timeline>
            <el-timeline-item v-for="(item, index) in historyProcNodeList" :key="index" :icon="setIcon(item.endTime)"
              :color="setColor(item.endTime)">
              <p style="font-weight: 700">{{ item.activityName }}</p>
              <el-card v-if="item.activityType === 'startEvent'" class="box-card" shadow="hover"> {{ item.assigneeName
                }} 在 {{ item.createTime }} 发起流程 </el-card>
              <el-card v-if="item.activityType === 'userTask'" class="box-card" shadow="hover">
                <el-descriptions :column="5" :labelStyle="{ 'font-weight': 'bold' }">
                  <el-descriptions-item label="实际办理">{{ item.assigneeName || "-" }}</el-descriptions-item>
                  <!-- <el-descriptions-item label="候选办理">{{ item.candidate || '-' }}</el-descriptions-item> -->
                  <el-descriptions-item label="接收时间">{{ item.createTime || "-" }}</el-descriptions-item>
                  <el-descriptions-item label="办结时间">{{ item.endTime || "-" }}</el-descriptions-item>
                  <el-descriptions-item label="耗时">{{ item.duration || "-" }}</el-descriptions-item>
                </el-descriptions>
                <div v-if="item.commentList && item.commentList.length > 0">
                  <div v-for="(comment, index) in item.commentList" :key="index">
                    <el-divider content-position="left">
                      <el-tag :type="approveTypeTag(comment.type)" size="mini">{{ commentType(comment.type) }}</el-tag>
                      <el-tag type="info" effect="plain" size="mini">{{ comment.time }}</el-tag>
                    </el-divider>
                    <span>{{ comment.fullMessage }}</span>
                  </div>
                </div>
              </el-card>
              <el-card v-if="item.activityType === 'endEvent'" class="box-card" shadow="hover"> {{ item.createTime }}
                结束流程 </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-col>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">关 闭</el-button>
    </div>
  </jy-dialog>
</template>
<script>
import { detailProcess } from "@/api/workflow/process";

export default {
  name: 'ApproveLog',
  computed: {
    commentType () {
      return (val) => {
        switch (val) {
          case "1":
            return "通过";
          case "2":
            return "退回";
          case "3":
            return "驳回";
          case "4":
            return "委派";
          case "5":
            return "转办";
          case "6":
            return "终止";
          case "7":
            return "撤回";
        }
      };
    },
    approveTypeTag () {
      return (val) => {
        switch (val) {
          case "1":
            return "success";
          case "2":
            return "warning";
          case "3":
            return "danger";
          case "4":
            return "primary";
          case "5":
            return "success";
          case "6":
            return "danger";
          case "7":
            return "info";
        }
      };
    }
  },
  data () {
    return {
      // 弹出层标题
      title: "流转记录",
      // 是否显示弹出层
      open: false,
      // 表单参数
      taskForm: {
        procInsId: undefined, // 流程实例编号
        taskId: undefined, // 流程任务编号
      },
      historyProcNodeList: []
    };
  },
  created () {
  },
  mounted () {
  },
  methods: {
    /** 新增按钮操作 */
    init (taskForm) {
      this.reset();
      this.taskForm = taskForm;
      this.open = true;
      // 流程任务重获取变量表单
      this.getProcessDetails(this.taskForm.procInsId, this.taskForm.taskId);
    },
    getProcessDetails (procInsId, taskId) {
      const params = { procInsId: procInsId, taskId: taskId };
      detailProcess(params).then((res) => {
        const data = res.data;
        this.xmlData = data.bpmnXml;
        this.procVars = data.procVars;
        this.processFormList = data.processFormList;
        this.taskFormOpen = data.existTaskForm;
        if (this.taskFormOpen) {
          this.taskFormData = data.taskFormData;
        }
        this.historyProcNodeList = data.historyProcNodeList;
        this.finishedInfo = data.flowViewer;
        this.formOpen = false;
      });
    },
    setIcon (val) {
      if (val) {
        return "el-icon-check";
      } else {
        return "el-icon-time";
      }
    },
    setColor (val) {
      if (val) {
        return "#2bc418";
      } else {
        return "#b3bdbb";
      }
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset () {
      this.taskForm = {
        procInsId: undefined, // 流程实例编号
        taskId: undefined, // 流程任务编号
      };
      this.historyProcNodeList = [];
    },
  },
};
</script>
<style lang="scss" scoped>
.box-card {
  width: 100%;
  margin-bottom: 20px;
}
</style>
